<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<title>合作猎头公司详情页面</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/fullcalendar.css">
<link rel="stylesheet" href="../../Content/css/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="../../Content/css/jquery.datetimepicker.css"/>
<link rel="stylesheet" href="../../Content/css/base.css" />
<link rel="stylesheet" type="text/css" href="../../Content/css/user.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
	<header id="header">
		<!--头部文件从最下面load读取 ../public/head.html--> 
	</header>
	<div class="main container-fluid " id="main">
		<div id="calendar"></div>
		
		
	</div>

<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/moment.min.js"></script>
<script src="../../Scripts/jquery.searchbox.animate.js"></script>
<script src="../../Scripts/fullcalendar.js"></script>
<script src="../../Scripts/all.js"></script>
<script src="../../Scripts/bootbox.min.js"></script>
<script src="../../Scripts/jquery.datetimepicker.js"></script>
<script src="../../Scripts/base.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function(){
		//读取共用的头部和菜单文件
		$("#header").load("../public/head.html nav",function(){
			$('[data-toggle="tooltip"]').tooltip();  //头部鼠标划过提示
			$('.search-box').searchbox({speed:500}); //头部搜索
		});
		
		/*日历*/
		//创建日历工具条左边内容

		var left_html='<div class="form-horizontal " style="min-width: 180px;">\
						<div class="form-group form-inline">\
	                		<span>切换用户</span>\
						    <select class="form-control">\
						      <option>管理员</option>\
						    </select>\
	                	 </div>\
	                	</div>'
	    //创建添加新事件弹窗对象
	    var modal_form = $("<form class='form-horizontal'></form>");
		var form_content='<ul class="list-unstyled">\
									<li class="row">\
										<div class="form-group">\
											<label class="col-md-2 control-label">主题</label>\
											<div class="col-md-8">\
												<input type="text" class="form-control" />\
											</div>\
										</div>\
									</li>\
									<li class="row">\
										<div class="form-group">\
											<label class="col-md-2 control-label">时间</label>\
											<div class="col-md-4">\
												<input type="text" class="form-control datepicker-box" />\
											</div>\
											<div class="col-md-4">\
												<input type="text" class="form-control datepicker-box" />\
											</div>\
										</div>\
									</li>\
									<li class="row">\
										<div class="form-group">\
											<label class="col-md-2 control-label">提醒</label>\
											<div class="col-md-8">\
												<select class="form-control">\
													<option>准点提醒</option>\
												</select>\
											</div>\
										</div>\
									</li>\
								</ul>';
		modal_form.append(form_content);
		modal_form.append('<div style="clear:both"></div>')
		//创建日历
		var calendar =$('#calendar').fullCalendar({
			//参数设置
			isCheckbox:true
			//设置显示的时间从几点开始 ,作用于日视图和周视图
			,minTime: '08:00:00'
			//设置显示的时间从几天结束,作用于日视图和周视图
			,maxTime: '24:00:00'
			,lang:'zh-cn'
			
			
			//设置头部
			,header: {
				left: '',
				center: 'title prev,next today',
				right: 'month,agendaWeek,agendaDay'
			}
			
			,editable: true
			,eventLimit: true// allow "more" link when too many events
			//初始化事件
			//接收一个json 数组 
			/*
			 * 例如：
			 * 	events：[{
					title: '事件标题',
					start: 事件开始时间   //时间日期需要转化为 date类型  ：Fri Mar 13 2015 00:00:00 GMT+0800
					end: 事件结束时间       //时间日期需要转化为 date类型  ：Fri Mar 13 2015 00:00:00 GMT+0800
					className: '为事件定义不同的样式,不定义为默认样式' 
				}]
			*/
			,events: []
			//是否允许用户通过单击或拖动选择日历中的对象
			,selectable: true			
			
			//日历单击选择 事件
			,select:function(start, end, allDay, jsEvent, view){
				//start:被选中区域的开始时间
				//end:被选中区域的结束时间
				//allDay:是否为全天事件
				//jsEvent:jascript对象
				//view:当前视图对象
				modal_form.find('input[type="text"]').val('');
				//绑定时间控件
				modal_form.find('.datepicker-box').datetimepicker({
					lang:'ch',
					datepicker:false,
  					format:'H:i'
				});
				var new_event_form = bootbox.dialog({
						title:'添加提醒'
						,message: modal_form//弹窗对象
						,buttons: {
							"ok" : {
								"label" : "<i class='icon-ok'></i> 保存",
								"className" : "btn btn-sm btn-primary",
								"callback": function() {
									calendar.fullCalendar('renderEvent',
										{
											title: modal_form.find('input').eq(0).val(),//事件标题
											start: start, //事件开始时间
											end: end,//事件结束时间
											allDay: allDay
										},
										true // make the event "stick"
									);
									calendar.fullCalendar('unselect');
								}
							} ,
							"close" : {
								"label" : "<i class='icon-remove'></i> 关闭",
								"className" : "btn-sm"
							} 
						}
				});
				
			},
			//事件点击事件
			eventClick:function(calEvent, jsEvent, view){
				var d=jsEvent.target.tagName;
				if(d=="INPUT"){
					//单选框事件
					if(jsEvent.target.checked){
						$(jsEvent.target).parent('.fc-content').css({'text-decoration':'line-through'})
					}else{
						$(jsEvent.target).parent('.fc-content').css({'text-decoration':'none'})
					}
				}else{
					modal_form.find("input[type=text]").eq(0).val(calEvent.title);
					modal_form.find('.datepicker-box').datetimepicker({
						lang:'ch',
						datepicker:false,
  						format:'H:i'
					});
					var update_event_form = bootbox.dialog({
							title:'添加提醒'
							,message: modal_form //弹窗对象
							,buttons: {
								"ok":{
									"label":"<i class='icon-ok'></i> 保存",
									"className" : "btn btn-sm btn-success",
									"callback":function(){
										calEvent.title = modal_form.find("input[type=text]").eq(0).val();
										calendar.fullCalendar('updateEvent', calEvent);
										//div.modal("hide");
										//return false;
									}
								},
								"delete" : {
									"label" : "<i class='icon-trash'></i> 删除事件",
									"className" : "btn-sm btn-danger",
									"callback": function() {
										calendar.fullCalendar('removeEvents' , function(ev){
											return (ev._id == calEvent._id);
										})
									}
								}
								
								 
							}
					});
				}
			}
		})
		calendar.find('.fc-toolbar .fc-left').html(left_html);
		
		
		
	})
</script>
</body>
</html>
